<template>
	<view class="edit-page">
		<view class="contentBox">
			<view class="form-title">基本信息</view>
			<view class="form-list">
				<view class="form-item">
					<view class="title required">名称</view>
					<view class="value-box">
						<input v-model="dataForm.type_name" placeholder="请输入名称" class="input" />
						<!-- <view class="value-info">{{ dataForm.type_name ? dataForm.type_name : '请选择' }}</view> -->
						<image src="../static/room/add.png" mode="widthFix" style="width: 50rpx; margin-left: 20rpx;"
							@click="selectFixedCosts" />
					</view>
				</view>
				<view class="form-item">
					<view class="title required">价格</view>
					<input v-model="dataForm.price" placeholder="请输入价格" class="input" type="digit" />
					<!-- <view class="unit">+/-</view> -->
				</view>
				<!-- <view class="pay-type-box">
					<view class="pay-type-item" v-for="(item,index) in payTypeList" :key="index"
						@click="dataForm.pay_type =  item.type">
						<image src="/pages-landlord/static/room/icon-xuan.png" class="icon-select"
							v-if="dataForm.pay_type==item.type"></image>
						<image src="/pages-landlord/static/room/icon-xuan1.png" class="icon-select" v-else>
						</image>
						{{item.name}}
					</view>
				</view> -->
				<!-- <view class="form-switch">
					<view class="title">先用后收</view>
					<u-switch v-model="dataForm.first_use" :activeValue="1" :inactiveValue="0"
						active-color="#fe4f04"></u-switch>
				</view> -->
			</view>
			<view class="fillBox" style="height: 150rpx;"></view>
			<view class="safe-bottom page-bottom" v-if="pageMode === 'add'">
				<view class="action-btn-group">
					<view class="action-btn" @click="confirmSave">保存</view>
				</view>
			</view>
			<view class="safe-bottom page-bottom" v-if="pageMode === 'edit'">
				<view class="action-btn-group">
					<view class="action-btn1" @click="deleteInfo">删除</view>
					<view class="action-btn2" @click="confirmSave">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	fixedDel
} from "@/api/landlord.js"
export default {
	data() {
		return {
			type: 0,
			pageMode: "add", // 房间页面模式，add为新增，edit为编辑
			dataForm: {
				type_name: '',
				price: '',
				pay_type: '',
				first_use: 0,
			},
			payTypeList: [{
				name: '随房租付',
				type: 1
			}, {
				name: '年付',
				type: 2
			}, {
				name: '半年付',
				type: 3
			}, {
				name: '一次性付',
				type: 4
			}, {
				name: '月付',
				type: 5
			}, {
				name: '季付',
				type: 6
			}], //付款方式类型
		}
	},
	onLoad(options) {
		if (options && options.type) {
			this.type = options.type;
		}
		if (options && options.dataInfo) {
			this.dataForm = JSON.parse(options.dataInfo);
			this.pageMode = 'edit'; // 如果有数据则为编辑模式
		}
	},
	onShow() {
		uni.$on('selectFixedCosts', (fixedCosts) => {
			if (this.dataForm.id) {
				this.dataForm = {
					id: this.dataForm.id || '',
					type_name: fixedCosts.type_name,
					price: fixedCosts.price,
					pay_type: fixedCosts.pay_type,
					first_use: 0, // 默认先用后收为否
				}
			} else {
				this.dataForm = {
					type_name: fixedCosts.type_name,
					price: fixedCosts.price,
					pay_type: fixedCosts.pay_type,
					first_use: 0, // 默认先用后收为否
				}
			}
			uni.$off('selectFixedCosts'); // 清除事件监听
		});
	},
	methods: {
		selectFixedCosts() {
			uni.navigateTo({
				url: '/pages-landlord/room-manage/costs-project-refund'
			})
		},
		// 提交信息
		confirmSave() {
			if (this.type == 1) {
				uni.$emit('selectRoomFixedCostss', this.dataForm);

			} else {
				uni.$emit('selectRoomFixedCosts', this.dataForm);
			}
			uni.navigateBack({
				delta: 1
			})
		},
		// 删除信息
		async deleteInfo() {
			// 如果有ID则调用API删除，否则直接处理
			// if (this.dataForm.id) {
			// 	await fixedDel({
			// 		id: this.dataForm.id
			// 	});
			// }
			this.$Toast('删除成功');
			// 使用Promise.all确保导航和事件触发更可靠
			setTimeout(() => {
				if (this.type == 1) {
					uni.$emit('deleteRoomFixedCostss', this.dataForm);

				} else {
					uni.$emit('deleteRoomFixedCosts', this.dataForm);
				}

				uni.navigateBack({
					delta: 1
				});
			}, 1000);
		}
	}
}
</script>

<style lang="scss" scoped>
/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	width: 100%;
	bottom: 0rpx;
	z-index: 95;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
	box-sizing: border-box;

	button {
		margin: unset;
		padding: unset;
		background-color: #ffffff;
	}

	button::after {
		border: none;
	}

	.icon-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #333333;
		margin-right: 48rpx;

		.label {
			font-size: 22rpx;
			color: #333333;
			margin-top: 6rpx;
		}
	}

	.action-btn-group {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		flex: 1;

		.action-btn {
			width: 100%;
			height: 88rpx;
			background: #FE4F04;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 79, 4, 0.5);
			font-weight: bold;
			font-size: 30rpx;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx
		}

		.action-btn1,
		.action-btn2 {
			width: 100%;
			height: 88rpx;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			border: 2rpx solid #FE4F04;
		}

		.action-btn1 {
			color: #FE4F04;
			background: #fff;
			margin-right: 10rpx;
		}

		.action-btn2 {
			color: #fff;
			background: #FE4F04;
			margin-left: 10rpx;
		}
	}
}

.edit-page {
	width: 100%;
	min-height: 100vh;
	background-color: #F7F8FA;

	.contentBox {
		padding-bottom: 40rpx;
	}
}

.form-switch {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.form-title {
	font-weight: bold;
	font-size: 26rpx;
	color: #2A0C00;
	margin: 24rpx 72rpx;
}

.form-list {
	padding: 34rpx 40rpx;
	border-radius: 16rpx;
	margin: 20rpx 32rpx;
	background: #FFFFFF;

	.form-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			width: 180rpx;
			font-size: 28rpx;
			color: #666666;
		}

		.required::after {
			content: '*';
			color: #FE4F04;
			padding-left: 10rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.unit {
			font-size: 28rpx;
			color: #222222;
			margin-left: 20rpx;
		}

		.input {
			flex: 1;
			text-align: left;
		}

		.value-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1;
			padding-right: 20rpx;

			.value-info {
				font-size: 28rpx;
				color: #222222;
			}
		}

	}

	.form-item:last-child {
		border-bottom: 0;
	}

	.pay-type-box {
		//网格布局一行三个
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;
		background: #F5F6FA;
		border-radius: 16rpx;
		padding: 20rpx 30rpx;

		.pay-type-item {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			padding: 10rpx 0;

			.icon-select {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
		}
	}
}
</style>